import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Link } from 'react-router';

import { Layout, Icon, Spin } from 'antd';

import appActions from './action';
import examActions from '../exam/action'
import './styles.less';

const { Header, Content, Footer, Sider } = Layout;
let inited = false;

function itemRender(route, params, routes, paths) {
  const last = routes.indexOf(route) === routes.length - 1;
  return last ? <span><Icon type={route.icon} style={{marginRight:'3px'}} />{route.breadcrumbName}</span> : <Link to={paths.join('/')}><Icon type={route.icon} style={{marginRight:'3px'}} />{route.breadcrumbName}</Link>;
}

import Login from './login';
import Install from './install';
import License from './license';

export class App extends Component {
  state = {
    collapsed: false
  };

  static propTypes = {
    children: PropTypes.node,
    app: PropTypes.object
  };

  componentDidMount(){
    const { router } = this.props;
    // console.log(this.props.location.pathname);
    this.props.appActions.isInstall();
    this.props.appActions.isLogin();
  }

  /**
   * menu click handle
   * @param item
   * @param key
   * @param keyPath
   */
  menuHandleClick(pathname) {
    if (pathname !== this.props.location.pathname) {
      this.props.router.push({
        pathname : pathname
      })
    }
  }

  /**
   * 添加一场考试
   */
  menuHandleAdd () {
    this.props.examActions.postAddExam({
      status : 'setting',
      exam_id : (new Date()).getTime()
    }).then(doc=>{
      this.props.router.push({
        pathname: '/examdetail/'+doc.info.$loki
      });
    })
  }

  render() {

    const loading = this.props.app.get('loading');
    const installed = this.props.app.get('installed');
    const license = this.props.app.get('license');
    const userinfo = this.props.app.get('userinfo');
    let pathname = this.props.location.pathname.split('/')[1] || '';

    const {routes} = this.props;

    if(!inited){
      inited = true;
      return (
        <div></div>
      );
    }

    console.log(license,'---license');

    if(!license){
      return (
        <License actions={this.props.appActions} />
      )
    }

    if(!installed){
      return (
        <Install actions={this.props.appActions} />
      )
    }

    if(!userinfo){
      return (
        <Login actions={this.props.appActions} />
      )
    }else{
      return (
        <Layout style={{height:'100%',flexWrap:'nowrap',background:'#fff'}} className="ant-layout-has-sider">
          <aside className="ant-layout-sider">
            <div className="logo" onClick={()=>{
                this.props.router.push({
                  pathname: '/'
                });
              }}>
              <Icon type="global" />
            </div>

            <ul className="ant-layout-sider-menu">
              <li onClick={()=>{ this.menuHandleClick('/examlist') }} className={ (pathname == 'examlist' || pathname == 'examview' || this.props.location.pathname == '/') && 'selected'}>
                <Icon type="laptop" /><br/>
                <span>考试列表</span>
              </li>
              <li onClick={()=>{ this.menuHandleAdd() }} className={ pathname == 'examdetail' && 'selected'}>
                <Icon type="plus-square-o" /><br/>
                <span>添加考试</span>
              </li>
              <li onClick={()=>{ this.menuHandleClick('/score/0') }} className={ pathname == 'score' && 'selected'}>
                <Icon type="solution" /><br/>
                <span>成绩查询</span>
              </li>
              <li onClick={()=>{ this.props.appActions.logout() }}>
                <Icon type="logout" /><br/>
                <span>退出账户</span>
              </li>
            </ul>

          </aside>
          <div style={{width:'100%',overflowY:'auto'}} className="ant-layout-bg">

            <Content>
              <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                {this.props.children}
              </div>
            </Content>
          </div>

          {
            loading && <div className="ant-layout-loading">
              <div className="ant-layout-loading-wrap">
                <Spin size="large" />
              </div>
            </div>
          }

        </Layout>
      );
    }
  }
}

export default connect((state)=>{
  return  {
    app: state.get('app')
  }
},dispatch => {
  return {
    appActions : bindActionCreators(appActions, dispatch),
    examActions : bindActionCreators(examActions, dispatch)
  }
})(App);